import React, { Component } from 'react'

class MagicItem extends Component {
  static defaultProps = {
    start: [-1, -1],
    end: [-1, -1],
    linkUrl: '',
    imgUrl: ''
  }

  render () {
    const {start, end, linkUrl, imgUrl, order} = this.props
    let _width = 0
    let _px = 0
    if (order === 3) {
      _px = 121.66
    } else if (order === 4) {
      _px = 90
    } else {
      _px = 71
    }
    if ((start.concat(end)[3] - start.concat(end)[1]) === 1) {
      _width = _px
    } else {
      _width = (start.concat(end)[3] - start.concat(end)[1]) * _px + (start.concat(end)[3] - start.concat(end)[1] - 1) * 5
    }
    let _height = 0
    if ((start.concat(end)[2] - start.concat(end)[0]) === 1) {
      _height = _px
    } else {
      _height = (start.concat(end)[2] - start.concat(end)[0]) * _px + (start.concat(end)[2] - start.concat(end)[0] - 1) * 5
    }
    return (
      <div className="item" style={{gridArea: start.concat(end).join('/'), width: _width, height: _height}}>
        <a href={linkUrl}>
          <img src={imgUrl} />
        </a>
      </div>
    )
  }
}

class MagicView extends Component {
  static defaultProps = {
    list: []
  }

  render () {
    const {list, order} = this.props
    return (
      <div className={`container container-order-${order}`}>
        {list.map((item, index) => <MagicItem key={index} {...item}  order={order}/>)}
      </div>
    )
  }
}

export default MagicView
